const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
// const sass = require('gulp-sass')(require('sass'));
// 3-1. 引入 gulp-uglify
// const uglify = require('gulp-uglify')
 
// 3-2. 引入 gulp-babel
//      es6 转 es5 虽然需要下载三个依赖，但是只需要引入一个 gulp-babel 就可以了
// const babel = require('gulp-babel')
 
// 4. 引入 gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
 
// 5. 引入 gulp-clean
const clean = require('gulp-clean');
 
// 7. 引入 gulp-webserver
const webserver = require('gulp-webserver')
 
gulp.task('css', function () {
    return gulp.src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
 
gulp.task('sass', function () {
    return gulp.src('./src/sass/**')
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
})
 
// 3. 创建一个 js 任务
gulp.task('js', function () {
    return gulp
        .src('./src/js/**')
        // .pipe(babel({
        //     presets: ['es2015']
        // }))
        // .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
})
 
// 4. 创建一个 html 任务
gulp.task('html', function () {
    return gulp
        .src('./src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttibutes: true, // 移出所有空属性
            collapseWhitespace: true // 压缩 html
        }))
        .pipe(gulp.dest('./dist/pages'))
})
 
 
gulp.task('lib', function () {
    return gulp.src('./src/fonts/**')
        .pipe(gulp.dest('./dist/fonts'))
})
 
gulp.task('static', function () {
    return gulp.src('./src/img/**')
        .pipe(gulp.dest('./dist/img'))
})
 
// 8. 创建一个 clean 任务
gulp.task('clean', function () {
    return gulp
        .src('./dist', {
            allowEmpty: true
        }) // {allowEmpty: true} dist目录不存在时配置
        
        .pipe(clean())
})
// 9. 创建一个 webserver 任务
gulp.task('webserver', function () {
    return gulp
        .src('./dist')
        .pipe(webserver({
            host: 'localhost', // 配置打开浏览器的域名
            port: 3000, // 配置打开浏览器的端口号
            livereload: true, // 自动刷新浏览器
            open: './pages/index.html' // 默认打开 dist 文件夹下的哪个文件
        }))
})
// 10. 创建一个 watch 任务
gulp.task('watch', function () {
    gulp.watch('./src/css/**', gulp.parallel('css'))
    gulp.watch('./src/js/**', gulp.parallel('js'))
    gulp.watch('./src/pages/**', gulp.parallel('html'))
    gulp.watch('./src/fonts/**', gulp.parallel('lib'))
    gulp.watch('./src/img /**', gulp.parallel('static'))
})
 
 
exports.default = gulp.series('clean', 
     gulp.parallel('css','js', 'html', 'lib', 'static'), 
     gulp.series('webserver','watch'))
 